<!-- <template>
  <div class="home">
    <div class="container">
      <div class="icon">
        <div class="bot"></div>
        <div class="bot"></div>
      </div>
    </div>
    <div class="container">
      <div class="icon">
        <div class="bot"></div>
        <div class="bot"></div>
      </div>
    </div>
    <div class="container">
      <div class="icon">
        <div class="bot"></div>
        <div class="bot"></div>
      </div>
    </div>
    <div class="container">
      <div class="icon">
        <div class="bot"></div>
        <div class="bot"></div>
      </div>
    </div>
    <div class="container">
      <div class="icon">
        <div class="bot"></div>
        <div class="bot"></div>
      </div>
    </div>
    <div class="container">
      <div class="icon">
        <div class="bot"></div>
        <div class="bot"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts"></script>
<style lang="less" scoped>
.icon {
  position: relative;
}
.home > :nth-child(1) {
  .icon .bot:nth-child(1) {
    position: absolute;
    top: 10%;
    left: 10%;
  }
  .icon .bot:nth-child(2) {
    position: absolute;
    top: 10%;
    right: 10%;
  }
}
.home > :nth-child(2) {
  .icon .bot:nth-child(1) {
    position: absolute;
    top: 10%;
    left: 10%;
  }
  .icon .bot:nth-child(2) {
    position: absolute;
    top: 90%;
    left: 10%;
    transform: translate(0, -100%);
  }
}
</style> -->
